<template>
	<view>
		<view style="background: #fff;padding-bottom: 20rpx;">
			<view class="complain-list-title">投诉内容</view>
			<view class="title">{{title}}</view>
			<view class="complain-list-title">投诉内容</view>
			<view class="textarea-box">
				<textarea maxlength="200" v-model="content" placeholder="请输入内容" class="textarea"
					style="overflow-y: auto;">
				</textarea>
			</view>
			<view class="form-title">图片证据<text>(选填)</text></view>

			<view class="img-list">
				<view v-for="(item,index) in img" :key="index">
					<image :src="item" mode="widthFix"></image>
				</view>
				<view @click="upImg" v-if="img.length<9">
					<image src="../../static/upImg.png" mode="widthFix"></image>
				</view>
			</view>





			<view class="form-title">联系方式<text>(请填写手机号，以便客服联系你解决)</text></view>

			<input type="text" placeholder="请输入手机号" class="input-box" v-model="phone">


			<view class="form-title">订单号<text>(未下单则无需填写)</text></view>
			<input type="text" placeholder="请输入订单号" class="input-box" v-model="order">
		</view>


		<view class="submit-btn" @click="submutInfo">提交</view>
		
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				content: '',
				img: [],
				phone: '',
				order: ''
			}
		},
		onLoad(opeions) {
			this.title = opeions.name
		},
		methods: {
			
			// copy(){
			// 	uni.setClipboardData({
			// 	      data: '1312507423',
			// 	      success: () => {
			// 	        uni.showModal({
			// 	        	title:'提示',
			// 	        	content:'客服QQ号：1312507423已复制，请前去咨询。'
			// 	        })
			// 	      },
			// 	      fail: () => {
			// 	        uni.showToast({
			// 	          title: '复制失败',
			// 	          icon: 'none',
			// 	          duration: 2000
			// 	        });
			// 	      }
			// 	    });
				
			// },
			submutInfo() {
				if (!this.content) {
					return uni.showToast({
						title: '请输入内容',
						icon: 'error'
					})
				}
				uni.showLoading({
					title: '提交中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					this.content = ''
					this.img = []
					this.phone = ''
					this.order = ''
				},1000)
			},
			upImg() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: res => {
						res.tempFilePaths.map(item => {
							this.img.push(item)
						})
					}
				});
			}
		}
	}
</script>

<style>
	body {
		background: #f5f5f5;
	}

	.complain-list-title {
		font-size: 28rpx;
		font-weight: 700;
		padding: 30rpx;
		background-color: #f1f1f1;
	}

	.title {
		font-size: 30rpx;
		padding: 20rpx 30rpx;
	}

	.textarea-box {
		width: 690rpx;
		margin: 0 auto;
	}

	.textarea {
		display: block;
		width: 100%;
		height: 300rpx;
		padding: 10rpx;
	}

	.form-title {
		width: 690rpx;
		margin: 0 auto;
		padding: 20rpx 30rpx;
		font-size: 32rpx;
		border-top: 2rpx solid #e6e6e6;
		padding-top: 24rpx;
		background: #fff;
	}

	.input-box {
		padding: 15rpx 30rpx;
	}

	.img-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 10rpx 30rpx;
	}

	.img-list view {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin: 0 20rpx 20rpx 0;
		overflow: hidden;
	}

	.img-list view image {
		width: 200rpx;
	}

	.submit-btn {
		width: 690rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		border-radius: 10rpx;
		background-color: #40b450;
		color: #fff;
		font-size: 32rpx;
		margin: 80rpx auto;
	}
	
	.public_footer_help {
		 position: fixed;
		 bottom: 0;
		 left: 0;
	        overflow: hidden;
	    line-height: 1.5;
	    text-align: center;
	   
	    width: 100%;
	    background: #864a30;
	    padding: .4rem;
	    color: #fff;
	}
	
	.public_footer_help>img {
	    width: .2rem;
	    height: .2rem;
	    margin-right: .05rem;
	    margin-left: .05rem;
	    display: inline-block;
	    vertical-align: middle
	}
	
	.public_footer_help .words {
	    display: inline-block
	}
	
	.public_footer_help .kf {
	    position: relative;
	    display: inline-block;
	    text-decoration: underline;
	    padding-left: 30px;
	    color: #fff;
	}
	
	.public_footer_help .kf::before {
	    content: "";
	    position: absolute;
	    left: 5px;
	    top: 50%;
	    -webkit-transform: translateY(-50%);
	    -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	    -o-transform: translateY(-50%);
	    transform: translateY(-50%);
	    background: url() no-repeat;
	    width: 20px;
	    height: 20px;
	    -moz-background-size: 100%;
	    -o-background-size: 100%;
	    background-size: 100%
	}
</style>